window.onload = function () {
    var force = document.getElementById('force')
    var ul = force.children[0];
    var ol = force.children[1];
    //一次移动的长度
    var w = force.offsetWidth;
    var index = 0;
    //判断用户是否移动了屏幕，防止用户只是点击，但是每次都做计算
    var flag = false;
    //定义动画
    var timer = setInterval(function () {
        index++;
        var translateX = -index * w;
        ul.style.transition = "all .3s";
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);
    //添加判断过渡事件是否完成，如果完成就使它为0，继续滚动 transitionend判断过渡是否完成
    ul.addEventListener('transitionend', function () {
        //这里是3的原因是因为第一张图片是为了无缝过渡作用，所以不参与计算
        if (index >= 3) {
            index = 0;
            var translateX = -index * w;
            //因为是实现无缝过渡，所以这里不能使用过渡效果，把过渡效果清除
            ul.style.transition = "none";
            ul.style.transform = 'translateX(' + translateX + 'px)';
        } else if (index < 0) {//这里是为了防止用户拖动一直往前拖动所以加一个判断是否是小于0，如果小于零则退回到第三张，也就是最后一张
            index = 2;
            var translateX = -index * w;
            ul.style.transition = "none";
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }
        //标签小圆点随之滚动 移动端可用，但是pc端要考虑兼容性
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    });
    // 触摸屏幕滑动效果
    var startx = 0;
    var movex = 0;
    //当我们手指刚触及屏幕以后，我们获取到此时目标位置，并清除动画
    ul.addEventListener('touchstart', function (e) {
        startx = e.targetTouches[0].pageX;
        clearInterval(timer);
    });
    //当我们移动时,此时我们计算移动的距离
    ul.addEventListener('touchmove', function (e) {
        //移动的距离
        movex = e.targetTouches[0].pageX - startx;
        //拖动盒子，此时的位置为原来的位置+movex的距离
        var translateX = -index * w + movex;
        ul.style.transition = "none";
        ul.style.transform = 'translateX(' + translateX + 'px)';
        //确定移动了距离，我们改flag为true
        flag = true;
        //阻止自动滚动屏幕
        e.preventDefault();
    });
    ul.addEventListener('touchend', function (e) {
        //判断flag是否为true
        if (flag) {
            //如果大于50px,我们就往前或者往后一张
            if (Math.abs(movex) > 50) {
                //判断左滑还是右滑
                if (movex > 0) {
                    index--;
                } else {
                    index++;
                }
                var translateX = -index * w;
                ul.style.transition = "all .3s";
                ul.style.transform = 'translateX(' + translateX + 'px)';
            } else {//如果不大于50我们就让盒子弹回原位置
                var translateX = -index * w;
                ul.style.transition = "all .1s";
                ul.style.transform = 'translateX(' + translateX + 'px)';
            }

        }
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            console.log(index);
            var translateX = -index * w;
            ul.style.transition = "all .3s";
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
        //当我们执行完移动判断以后，把flag重新置为false
        flag = false;

    });

    var back=document.querySelector('.go-back');
    var nav=document.querySelector('nav');
    window.addEventListener('scroll',function (){
        if(window.pageYOffset>=nav.offsetTop){
            back.style.display= 'block';
        }else{
            back.style.display='none';
        }
    });
    back.addEventListener('click',function (){
        window.scroll(0,0);
    });
}